<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" /> 
        <title>basic list</title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- 遍历数组 -->
            <h2>人员列表</h2>
            <ul>
                <li v-for="(p, index) in people" :key="index">
                    {{p.name}} - {{p.age}}
                </li>
            </ul>

            <!-- 遍历对象 -->
            <h2>汽车信息</h2>
            <ul>
                <li v-for="(c, k) in cars" :key="k">
                    {{k}} - {{c}}
                </li>
            </ul>

            <!-- 遍历字符串 -->
            <h2>测试遍历字符串</h2>
            <ul>
                <li v-for="(w, index) in word" :key="index">
                    {{index}} - {{w}}
                </li>
            </ul>

            <!-- 遍历指定次数 -->
            <h2>测试遍历指定次数</h2>
            <ul>
                <li v-for="(w, index) in 5" :key="index">
                    {{index}} - {{w}}
                </li>
            </ul>
        
        </div>
    </body>
            
    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

        new Vue({
            el:'#root',
            data:{
                people: [
                    {id:'001', name: 'a', age: 18},
                    {id:'002', name: 'b', age: 19},
                    {id:'003', name: 'c', age: 20}
                ],
                cars:{
                    name:'aodi',
                    price:'100w',
                    color: 'black'
                },
                word: 'hello'
            }
        })
    </script>
</html>